<script setup>
/*
  vue2:
     provide 与inject
     作用：高阶组件向低阶组件传值，只是用于传递一个值过来，
     用法：
        高阶组件传：
           provide(){
            return {
              属性名:值
            }
           }
        低阶组件收：
            inject:['属性名']
            this.属性名
   vue3
      用法：
        高阶组件传
          1：导入 import {provide} from 'vue'
          2:使用
             provide('属性名',值)
        低阶组件收：
          1：导入  import {inject} from 'vue'
          2:使用
            const 变量名=inject('属性名',默认值)
      建议：公共组件封装时使用，业务场景尽量别用

*/
import { provide, ref } from 'vue'
import HmSonB from './components/HmSonB.vue'
const fn = str => {
  console.log(str)
}
const num = ref(999)
const isShow = ref(false)
const showFn = bol => {
  isShow.value = bol
}
provide('toSon', 'hello')
provide('fn', fn)
provide('num', num)
provide('showFn', showFn)
</script>

<template>
  <div class="app-page">app</div>
  <hr />
  <HmSonB></HmSonB>
  <hr />
  <div v-if="isShow">loading</div>
</template>

<style scoped></style>
